<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>姓名案例_watch实现</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
								这样this的指向才是vm 或 组件实例对象。
		-->
  <!-- 准备好一个容器-->
  <div id="root">
    姓：<input type="text" v-model="firstName"> <br /><br />
    名：<input type="text" v-model="lastName"> <br /><br />
    全名：<span>{{fullName}}</span> <br /><br />
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
    el: '#root',
    data: {
      firstName: '张',
      lastName: '三',
      fullName: '张-三'
    },
    watch: {
      firstName(val) {
        setTimeout(
          // 箭头函数没有this指向，它需要向外找，外面是vue所管理的函数firstName
          // 因此箭头函数的this指向vue
          // 而使用普通函数会导致this指向window
          () => {
            console.log(this)
            this.fullName = val + '-' + this.lastName
          }, 1000);
      },
      lastName(val) {
        this.fullName = this.firstName + '-' + val
      }
    }
  })
</script>

</html>